<template>
  <div>
    <el-form-item>
      <el-collapse class="collapseStyle" v-model="activeNames" @change="handleChange">
        <el-collapse-item name="1" class="collapseStyleParent">
          <template slot="title">
            <div class="collapseTitle">
              <span>响应内容</span>
            </div>
          </template>
          <div class="collapseContent">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane name="1">
                <span slot="label">返回头部</span>
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%;margin-top: 15px;">
                  <el-table-column width="50">
                    <template slot-scope="scope">
                      <span v-if="scope.row.addRow">添加</span>
                      <i v-else class="el-icon-sort"></i>
                    </template>
                  </el-table-column>
                  <el-table-column prop="date" label="标签" width="380">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.headerName" :class="{styleInput: !scope.row.addRow}" @input="val => tableRowDataChange(val, scope.row, 'tableData')" size="small" placeholder="头部标签"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="必含" width="80">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-checkbox v-model="scope.row.required"></el-checkbox>
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="内容">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-input v-model="scope.row.headerValue" class="styleInput" size="small" placeholder="头部内容"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="说明">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-input v-model="scope.row.remarks" class="styleInput" size="small" placeholder="参数说明"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="更多操作" width="160">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <!--<el-button type="text">更多设置</el-button>-->
                      <el-button type="text" @click="removeRow(scope.$index, 'tableData')">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane name="2">
                <span slot="label">返回结果 <i class="el-icon-info"></i></span>
                <div class="requsetBodyContent">
                  <div class="requsetBodyHeader">
                    <el-radio-group v-model="requestorRadio">
                      <el-radio label="JSON">JSON</el-radio>
                      <el-radio label="XML">XML</el-radio>
                      <el-radio label="Raw">Raw</el-radio>
                      <el-radio label="Binary">Binary</el-radio>
                    </el-radio-group>
                    <!--<span style="display: inline-block;color:#d9d9d9;margin: 0 12px;vertical-align: middle;" v-if="requestorRadio === 2 || requestorRadio === 3">|</span>-->
                    <!--<div class="groupRadioBtn">-->
                    <!--<div class="groupRadioBtnItem" v-if="requestorRadio === 2 || requestorRadio === 3">-->
                    <!--<el-dropdown style="cursor: pointer;">-->
                    <!--<span class="el-dropdown-link">-->
                    <!--<i class="iconfont" style="display: inline-block;margin: 0 6px 0 0;">&#xe671;</i>导入<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                    <!--</span>-->
                    <!--<el-dropdown-menu slot="dropdown">-->
                    <!--<el-dropdown-item>表单</el-dropdown-item>-->
                    <!--</el-dropdown-menu>-->
                    <!--</el-dropdown>-->
                    <!--</div>-->
                    <!--<div class="groupRadioBtnItem" v-if="requestorRadio === 2 || requestorRadio === 3">-->
                    <!--<el-dropdown style="cursor: pointer;">-->
                    <!--<span class="el-dropdown-link">-->
                    <!--<i class="el-icon-refresh" style="display: inline-block;margin: 0 6px 0 0;"></i>转换为<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                    <!--</span>-->
                    <!--<el-dropdown-menu slot="dropdown">-->
                    <!--<el-dropdown-item>Json</el-dropdown-item>-->
                    <!--<el-dropdown-item>Raw</el-dropdown-item>-->
                    <!--</el-dropdown-menu>-->
                    <!--</el-dropdown>-->
                    <!--</div>-->
                    <!--</div>-->
                  </div>
                  <div class="jsonType" v-if="requestorRadio === 'JSON'">
                    <span style="display: block;font-size: 12px;color: rgb(153,153,153);margin: 0 0 4px 0;">JSON 根类型 <i class="el-icon-info"></i> : </span>
                    <el-select v-model="optionsJsonVal" size="small" placeholder="请选择">
                      <el-option
                        v-for="item in optionsJson"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div>
                    <div style="margin-top: 16px;">
                      <indexTable v-show="requestorRadio === 'JSON'" ref="indexTable2" title="参数名" :list="requestBodyTableJson" :tableBtn="btnAll2" :dataStructuretype="dataStructuretype"  :fdataStructureIds="fdataStructureIds" @insertStructure="insertStructure" @StructureID="StructureID" @handlerExpand="handlerExpand" @handelClickRowEdit="handelClickRowEdit"></indexTable>
                    </div>
                    <div style="margin-top: 16px;">
                      <indexTable v-show="requestorRadio === 'XML'" ref="indexTable3" title="参数名" :list="requestBodyTableXML" :tableBtn="btnAll3"  :dataStructuretype="dataStructuretype"  :fdataStructureIds="fdataStructureIds" @insertStructure="insertStructure" @StructureID="StructureID" @handlerExpand="handlerExpand" @handelClickRowEdit="handelClickRowEdit"></indexTable>
                    </div>
                    <div class="rawTextArea" v-if="requestorRadio === 'Raw'">
                      <codeMirror ref="rawTextareaResponse" :respResultRawTypeLabel="respResultRawTypeLabel" :refName="refName" :value="textAreaValue"></codeMirror>
                    </div>
                    <div v-if="requestorRadio === 'Binary'" style="margin-top: 14px;">
                      <el-input
                        type="textarea"
                        :rows="6"
                        resize="none"
                        placeholder="参数描述"
                        v-model="textareaBinary">
                      </el-input>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-form-item>
    <el-dialog
      custom-class="dhcWebLayer"
      top="0"
      v-if="dialogConfigReq"
      :close-on-click-modal="false"
      title="设置参数"
      :visible.sync="dialogConfigReq"
      width="40%">
      <el-form ref="form" label-position="top" :model="formDataReq" label-width="80px">
        <el-form-item label="参数名">
          <el-input size="small" v-model="formDataReq.parameterName"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select class="styleInput" size="small" v-model="formDataReq.type" placeholder="请选择">
            <el-option
              v-for="item in optionsType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="必填">
          <el-checkbox size="small" v-model="formDataReq.required"></el-checkbox>
        </el-form-item>
        <el-form-item label="说明">
          <el-input size="small" v-model="formDataReq.explain"></el-input>
        </el-form-item>
        <el-form-item label="限制">
          <el-input size="small" v-model="formDataReq.limit"></el-input>
        </el-form-item>
        <el-form-item label="示例">
          <el-input size="small" v-model="formDataReq.example"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: right;">
        <el-button size="small" @click="dialogConfigReq = false">取 消</el-button>
        <el-button size="small" type="primary" @click="saveDialogConfigReq">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog
      custom-class="dhcWebLayer"
      top="0"
      v-if="dialogConfigReqXml"
      :close-on-click-modal="false"
      title="设置参数"
      :visible.sync="dialogConfigReqXml"
      width="40%">
      <el-form ref="form" label-position="top" :model="formDataReqXml" label-width="80px">
        <el-form-item label="参数名">
          <el-input size="small" v-model="formDataReqXml.parameterName"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select class="styleInput" size="small" v-model="formDataReqXml.type" placeholder="请选择">
            <el-option
              v-for="item in optionsType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="必填">
          <el-checkbox size="small" v-model="formDataReqXml.required"></el-checkbox>
        </el-form-item>
        <el-form-item label="说明">
          <el-input size="small" v-model="formDataReqXml.explain"></el-input>
        </el-form-item>
        <el-form-item label="限制">
          <el-input size="small" v-model="formDataReqXml.limit"></el-input>
        </el-form-item>
        <el-form-item label="示例">
          <el-input size="small" v-model="formDataReqXml.example"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: right;">
        <el-button size="small" @click="dialogConfigReqXml = false">取 消</el-button>
        <el-button size="small" type="primary" @click="saveDialogConfigReqXml">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import codeMirror from '@/components/codeMirror'
  import indexTable from '@/components/dhcTable/indexTable'
  export default {
    name: 'responseContent',
    props: ['form'],
    components: {
      codeMirror,
      indexTable
    },
    data() {
      return {
        fdataStructureIds: [],
        dataStructuretype: '',
        btnAll2: {
          insert: true,
          addSubfield: true,
          insertDataStructure: true,
          delete: true
        },
        requestBodyTableJson: [
          {
            id: '',
            parentId: null,
            parameterName: '',
            type: '',
            required: true,
            example: '',
            explain: '',
            limit: '',
            children: []
          }
        ],
        btnAll3: {
          insert: false,
          addSubfield: true,
          insertDataStructure: true,
          delete: false
        },
        requestBodyTableXML: [
          {
            id: '',
            parentId: null,
            parameterName: '',
            type: '',
            required: true,
            example: '',
            explain: '',
            limit: '',
            children: []
          }
        ],
        dataStructureIds: [], // 数据结构ID
        editRowIdReq: '',
        addRowIdReq: '',
        childrenIdReq: '',
        childrenParentIdReq: '',
        formDataReq: {
          parameterName: '',
          type: '',
          required: true,
          explain: '',
          limit: '',
          example: ''
        },
        dialogConfigReq: false,
        columnsReq: [
          {
            label: '参数名',
            prop: 'parameterName',
            width: '300',
            align: 'left',
            headerAlign: 'center',
            type: 'template',
            template: 'parameterName'
          },
          {
            label: '类型',
            prop: 'type',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'type'
          },
          {
            label: '必填',
            prop: 'required',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'required'
          },
          {
            label: '说明',
            prop: 'explain',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'explain'
          },
          {
            label: '限制',
            prop: 'limit',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'limit'
          },
          {
            label: '示例',
            prop: 'example',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'example'
          },
          {
            label: '更多操作',
            align: 'center',
            width: '300',
            headerAlign: 'center',
            type: 'template',
            template: 'empower'
          }
        ],
        parentIdDataReq: '',
        charsReq: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        // -----------------------------------------
        editRowIdReqXml: '',
        addRowIdReqXml: '',
        childrenIdReqXml: '',
        childrenParentIdReqXml: '',
        formDataReqXml: {
          parameterName: '',
          type: '',
          required: true,
          explain: '',
          limit: '',
          example: ''
        },
        dialogConfigReqXml: false,
        columnsReqXml: [
          {
            label: '参数名',
            prop: 'parameterName',
            width: '300',
            align: 'left',
            headerAlign: 'center',
            type: 'template',
            template: 'parameterName'
          },
          {
            label: '类型',
            prop: 'type',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'type'
          },
          {
            label: '必填',
            prop: 'required',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'required'
          },
          {
            label: '说明',
            prop: 'explain',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'explain'
          },
          {
            label: '限制',
            prop: 'limit',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'limit'
          },
          {
            label: '示例',
            prop: 'example',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'example'
          },
          {
            label: '更多操作',
            align: 'center',
            width: '300',
            headerAlign: 'center',
            type: 'template',
            template: 'empower'
          }
        ],
        // optionsType: [
        //   {
        //     value: 'string',
        //     label: '[string]'
        //   }, {
        //     value: 'array',
        //     label: '[array]'
        //   }, {
        //     value: 'object',
        //     label: '[object]'
        //   }, {
        //     value: 'int',
        //     label: '[int]'
        //   }
        // ],
        parentIdDataReqXml: '',
        charsReqXml: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        // ---------------------
        refName: 'rawTextareaResponse',
        refNamePreteratment: 'preteratmentTextarea',
        textAreaValuePreteratment: '',
        textAreaValue: '',
        // ---------------------
        showCollapse: true,
        responsePreteratmentBodyLeftData: [
          {
            name: 'API信息',
            items: [
              {
                label: '请求头部（headers）',
                value: 'headers[""]'
              },
              {
                label: '请求参数（params）',
                value: 'params[""]'
              },
              {
                label: '源数据（raw）',
                value: 'raw'
              },
              {
                label: 'Query 请求参数（query）',
                value: 'query[""]'
              },
              {
                label: '返回头部 (responseHeaders)',
                value: 'responseHeaders[""]'
              },
              {
                label: '返回值 (response)',
                value: 'response[""]'
              }
            ]
          },
          {
            name: '项目环境',
            items: [
              {
                label: 'Host 地址前缀（env.baseUrl）',
                value: 'env.baseUrl'
              },
              {
                label: '额外请求头部（env.headers）',
                value: 'env.headers[""]'
              },
              {
                label: '额外表单请求参数（env.extraParams）',
                value: 'env.extraParams[""]'
              },
              {
                label: '额外 Query 请求参数（env.querys）',
                value: 'env.querys[""]'
              },
              {
                label: '全局变量（env.globalParams）',
                value: 'env.globalParams[""]'
              }
            ]
          },
          {
            name: '公共资源',
            items: [
              {
                label: '公共资源',
                name: '插入自定义通用函数'
              }
            ]
          },
          {
            name: '加密 / 解密',
            items: [
              {
                label: 'MD5',
                value: 'eo.md5(data)'
              },
              {
                label: 'SHA1 加密',
                value: 'eo.sha1(data)'
              },
              {
                label: 'SHA256 加密',
                value: 'eo.sha256(data)'
              },
              {
                label: 'RSA-SHA1 签名',
                value: 'eo.rsaSHA1(data,privateKey,[outputEncoding])'
              },
              {
                label: 'RSA-SHA256 签名',
                value: 'eo.rsaSHA256(data,privateKey,[outputEncoding])'
              },
              {
                label: 'RSA 公钥加密',
                value: 'eo.rsaPublicEncrypt(publicKey,data,[outputEncoding])'
              },
              {
                label: 'RSA 公钥解密',
                value: 'eo.rsaPublicDecrypt(publicKey,data,[inputEncoding])'
              },
              {
                label: 'RSA 私钥加密',
                value: 'eo.rsaPrivateEncrypt(privateKey,data,[outputEncoding])'
              },
              {
                label: 'RSA 私钥解密',
                value: 'eo.rsaPrivateDecrypt(privateKey,data,[inputEncoding])'
              },
              {
                label: 'AES 加密',
                value: 'eo.aesEncrypt(data,password,[options])'
              },
              {
                label: 'AES 解密',
                value: 'eo.aesDecrypt(data,password,[options])'
              },
              {
                label: 'DES 加密',
                value: 'eo.desEncrypt(data,password,[options])'
              },
              {
                label: 'DES 解密',
                value: 'eo.desDecrypt(data,password,[options])'
              }
            ]
          }
        ],
        requestPreteratmentBodyLeftData: [
          {
            name: 'API信息',
            items: [
              {
                label: '请求地址（url）',
                value: 'url'
              },
              {
                label: '请求头部（headers）',
                value: 'headers[""]'
              },
              {
                label: '请求参数（params）',
                value: 'params[""]'
              },
              {
                label: '源数据（raw）',
                value: 'raw'
              },
              {
                label: 'Query 请求参数（query）',
                value: 'query[""]'
              }
            ]
          },
          {
            name: '项目环境',
            items: [
              {
                label: 'Host 地址前缀（env.baseUrl）',
                value: 'env.baseUrl'
              },
              {
                label: '额外请求头部（env.headers）',
                value: 'env.headers[""]'
              },
              {
                label: '额外表单请求参数（env.extraParams）',
                value: 'env.extraParams[""]'
              },
              {
                label: '额外 Query 请求参数（env.querys）',
                value: 'env.querys[""]'
              },
              {
                label: '全局变量（env.globalParams）',
                value: 'env.globalParams[""]'
              }
            ]
          },
          {
            name: '公共资源',
            items: [
              {
                label: '插入自定义通用函数',
                value: ''
              }
            ]
          },
          {
            name: '加密 / 解密',
            items: [
              {
                label: 'MD5',
                value: 'eo.md5(data)'
              },
              {
                label: 'SHA1 加密',
                value: 'eo.sha1(data)'
              },
              {
                label: 'SHA256 加密',
                value: 'eo.sha256(data)'
              },
              {
                label: 'RSA-SHA1 签名',
                value: 'eo.rsaSHA1(data,privateKey,[outputEncoding])'
              },
              {
                label: 'RSA-SHA256 签名',
                value: 'eo.rsaSHA256(data,privateKey,[outputEncoding])'
              },
              {
                label: 'RSA 公钥加密',
                value: 'eo.rsaPublicEncrypt(publicKey,data,[outputEncoding])'
              },
              {
                label: 'RSA 公钥解密',
                value: 'eo.rsaPublicDecrypt(publicKey,data,[inputEncoding])'
              },
              {
                label: 'RSA 私钥加密',
                value: 'eo.rsaPrivateEncrypt(privateKey,data,[outputEncoding])'
              },
              {
                label: 'RSA 私钥解密',
                value: 'eo.rsaPrivateDecrypt(privateKey,data,[inputEncoding])'
              },
              {
                label: 'AES 加密',
                value: 'eo.aesEncrypt(data,password,[options])'
              },
              {
                label: 'AES 解密',
                value: 'eo.aesDecrypt(data,password,[options])'
              },
              {
                label: 'DES 加密',
                value: 'eo.desEncrypt(data,password,[options])'
              },
              {
                label: 'DES 解密',
                value: 'eo.desDecrypt(data,password,[options])'
              }
            ]
          }
        ],
        activeNameBodyLeft: '1',
        preteratmentRadio: 0,
        checkedJwtBearerToken: '',
        textareaBinary: '',
        respResultRawTypeLabel: '',
        userNameAuthor: '',
        passwordAuthor: '',
        activeName: '1',
        AuthorityVerification: '无',
        selectVal: '0',
        dataArr: this.form,
        activeNames: [],
        requestHeaderNum: 0,
        requestorRadio: 'JSON',
        optionsJsonVal: '',
        optionsAuthorization: [
          {
            value: '0',
            label: '无'
          },
          {
            value: '1',
            label: 'Basic Auth'
          },
          {
            value: '2',
            label: 'JWT'
          }
        ],
        optionsJson: [
          {
            value: '0',
            label: 'Object'
          },
          {
            value: '1',
            label: 'Array'
          }
        ],
        optionsType: [
          {
            value: '0',
            label: '[string]'
          }, {
            value: '1',
            label: '[array]'
          }, {
            value: '2',
            label: '[object]'
          }, {
            value: '3',
            label: '[number]'
          }, {
            value: '4',
            label: '[null]'
          }
        ],
        optionsPosition: [
          {
            value: '0',
            label: 'Query'
          },
          {
            value: '1',
            label: 'Header'
          }
        ],
        jwtHeaderData: [
          {
            typ: 'JWT',
            alg: ''
          }
        ],
        jwtPayloadData: [
          {
            data: ''
          }
        ],
        jwtSignatureData: [
          {
            secretSalt: ''
          }
        ],
        jwtTokenPositionData: [
          {
            position: '',
            tokenName: ''
          }
        ],
        optionsJwtHeader: [
          {
            value: '0',
            label: 'HS384'
          },
          {
            value: '1',
            label: 'HS385'
          },
          {
            value: '2',
            label: 'HS386'
          },
          {
            value: '3',
            label: 'HS387'
          },
          {
            value: '4',
            label: 'HS388'
          }
        ],
        requestBodyTableREST: [
          {
            addRow: true,
            parameterName: '',
            type: '',
            required: true,
            explain: '',
            limit: '',
            example: ''
          }
        ],
        requestBodyTableQuery: [
          {
            addRow: true,
            parameterName: '',
            type: '',
            required: true,
            explain: '',
            limit: '',
            example: ''
          }
        ],
        requestBodyTableFormData: [
          {
            addRow: true,
            parameterName: '',
            type: '',
            required: true,
            explain: '',
            limit: '',
            example: ''
          }
        ],
        tableData: [
          {
            type: 0, // 类型（0请求head，1返回head）
            headerName: '', // 标签
            required: true, // 必填
            headerValue: '', // 示例
            remarks: '', // 说明
            addRow: true
          }
        ]
      }
    },
    created() {
      // 返回头部数据
      this.requestBodyTableJson = [
        {
          id: this.generateMixedReq(32),
          parentId: null,
          parameterName: '',
          type: '',
          required: true,
          example: '',
          explain: '',
          limit: '',
          children: []
        }
      ]
      this.requestBodyTableXML = [
        {
          id: this.generateMixedReq(32),
          parentId: null,
          parameterName: '',
          type: '',
          required: true,
          example: '',
          explain: '',
          limit: '',
          children: []
        }
      ]
      this.tableData = this.dataArr.respHeaderInfo
      this.fdataStructureIds = this.dataArr.dataStructureIds
      this.tableData.push({
        type: 0, // 类型（0请求head，1返回head）
        headerName: '', // 标签
        required: true, // 必填
        headerValue: '', // 示例
        remarks: '', // 说明
        addRow: true
      })
      this.transFun(this.tableData)
      // 返回结果
      this.requestorRadio = this.dataArr.respResultType
      this.optionsJsonVal = this.dataArr.respResultJsonType
      switch (this.requestorRadio) {
        case 'JSON':
          this.requestBodyTableJson = this.dataArr.respBodyInfo
          break
        case 'XML':
          this.requestBodyTableXML = this.dataArr.respBodyInfo
          break
        case 'Raw':
          this.textAreaValue = this.dataArr.respResultRaw
          break
        case 'Binary':
          this.textareaBinary = this.dataArr.respResultBinaryDesc
          break
      }
      this.respResultRawTypeLabel = this.dataArr.respResultRawType
    },
    methods: {
      StructureID(row) {
        console.log(row)
        this.dataStructureIds = row
      },
      insertStructure() {
        this.dataStructuretype = this.requestorRadio
      },
      getDataAll() {
        this.requestBodyTableJson = this.$refs.indexTable2.getTableData()
        this.requestBodyTableXML = this.$refs.indexTable3.getTableData()
      },
      handlerExpand(row) {
        console.log(row)
        row.isExpand = !row.isExpand
      },
      handelClickRowEdit(row, oldRow) {
        if (row.id === oldRow.id) {
          row.editRow = false
          oldRow.editRow = false
        } else {
          row.editRow = true
          oldRow.editRow = false
        }
      },
      removeTableRowReq(row, index) {
        const newArr = this.filterReq(this.requestBodyTableXML, row.id)
        this.requestBodyTableXML = newArr
      },
      filterReq(data, id) {
        const _this = this
        var newData = data.filter(x => x.id !== id)
        newData.forEach(x => x.children && (x.children = _this.filterReq(x.children, id)))
        return newData
      },
      generateMixedReq(n) {
        var res = ''
        for (var i = 0; i < n; i++) {
          var id = Math.ceil(Math.random() * 35)
          res += this.charsReq[id]
        }
        return res
      },
      dataForEachFunReq(data) {
        const _this = this
        data.forEach((val, index) => {
          if (val.id === _this.editRowIdReq) {
            val.parameterName = _this.formDataReq.parameterName
            val.type = _this.formDataReq.type
            val.required = _this.formDataReq.required
            val.explain = _this.formDataReq.explain
            val.limit = _this.formDataReq.limit
            val.example = _this.formDataReq.example
          } else if (val.children.length !== 0) {
            _this.dataForEachFunReq(val.children)
          }
        })
      },
      saveDialogConfigReq() {
        this.dataForEachFunReq(this.requestBodyTableXML)
        console.log(this.requestBodyTableXML)
        this.dialogConfigReq = false
      },
      childrenForEachFunReq(data) {
        const _this = this
        data.forEach((val, index) => {
          console.log(val.children)
          console.log(val.id)
          if (val.id === _this.childrenIdReq) {
            val.children.push({
              id: _this.generateMixedReq(30),
              parentId: _this.childrenParentIdReq,
              parameterName: '',
              type: '',
              required: true,
              explain: '',
              limit: '',
              example: '',
              children: []
            })
          } else if (val.children.length !== 0) {
            console.log('有子集')
            _this.childrenForEachFunReq(val.children)
          }
        })
      },
      configCanshuReq(row, index, val) {
        this.editRowIdReq = row.id
        this.formDataReq.parameterName = row.parameterName
        this.formDataReq.type = row.type
        this.formDataReq.required = row.required
        this.formDataReq.explain = row.explain
        this.formDataReq.limit = row.limit
        this.formDataReq.example = row.example
        this.dialogConfigReq = true
      },
      addFieldChildrenReq(row, index) {
        console.log(this.requestBodyTableXML)
        this.childrenIdReq = row.id
        this.childrenParentIdReq = row.id
        this.childrenForEachFunReq(this.requestBodyTableXML)
      },
      addForEachFunReq(data) {
        const _this = this
        data.forEach((val, index) => {
          if (val.id === _this.parentIdDataReq) {
            console.log(val)
            val.children.push({
              id: _this.generateMixedReq(30),
              parentId: _this.parentIdDataReq,
              parameterName: '',
              type: '',
              required: true,
              explain: '',
              limit: '',
              example: '',
              children: []
            })
          } else if (val.children.length !== 0) {
            _this.addForEachFunReq(val.children)
          }
        })
      },
      addRowDataReq(row, index) {
        const _this = this
        this.parentIdDataReq = row.parentId
        console.log(row)
        if (row.parentId === '****') {
          this.requestBodyTableXML.splice(index, 0, {
            id: _this.generateMixedReq(30),
            parentId: '****',
            parameterName: '',
            type: '',
            required: true,
            explain: '',
            limit: '',
            example: '',
            children: []
          })
        } else {
          console.log('不是根节点')
          this.addForEachFunReq(this.requestBodyTableXML)
        }
      },
      // ------------------------------------------------------------------
      removeTableRowReqXml(row, index) {
        const newArr = this.filterReqXml(this.requestBodyTableJson, row.id)
        this.requestBodyTableJson = newArr
      },
      filterReqXml(data, id) {
        const _this = this
        var newData = data.filter(x => x.id !== id)
        newData.forEach(x => x.children && (x.children = _this.filterReqXml(x.children, id)))
        return newData
      },
      generateMixedReqXml(n) {
        var res = ''
        for (var i = 0; i < n; i++) {
          var id = Math.ceil(Math.random() * 35)
          res += this.charsReqXml[id]
        }
        return res
      },
      dataForEachFunReqXml(data) {
        const _this = this
        data.forEach((val, index) => {
          if (val.id === _this.editRowIdReqXml) {
            val.parameterName = _this.formDataReqXml.parameterName
            val.type = _this.formDataReqXml.type
            val.required = _this.formDataReqXml.required
            val.explain = _this.formDataReqXml.explain
            val.limit = _this.formDataReqXml.limit
            val.example = _this.formDataReqXml.example
          } else if (val.children.length !== 0) {
            _this.dataForEachFunReqXml(val.children)
          }
        })
      },
      saveDialogConfigReqXml() {
        this.dataForEachFunReqXml(this.requestBodyTableJson)
        this.dialogConfigReqXml = false
      },
      childrenForEachFunReqXml(data) {
        const _this = this
        data.forEach((val, index) => {
          console.log(val.children)
          console.log(val.id)
          if (val.id === _this.childrenIdReqXml) {
            val.children.push({
              id: _this.generateMixedReqXml(30),
              parentId: _this.childrenParentIdReqXml,
              parameterName: '',
              type: '',
              required: true,
              explain: '',
              limit: '',
              example: '',
              children: []
            })
          } else if (val.children.length !== 0) {
            console.log('有子集')
            _this.childrenForEachFunReqXml(val.children)
          }
        })
      },
      configCanshuReqXml(row, index, val) {
        this.editRowIdReqXml = row.id
        this.formDataReqXml.parameterName = row.parameterName
        this.formDataReqXml.type = row.type
        this.formDataReqXml.required = row.required
        this.formDataReqXml.explain = row.explain
        this.formDataReqXml.limit = row.limit
        this.formDataReqXml.example = row.example
        this.dialogConfigReqXml = true
      },
      addFieldChildrenReqXml(row, index) {
        this.childrenIdReqXml = row.id
        this.childrenParentIdReqXml = row.id
        this.childrenForEachFunReqXml(this.requestBodyTableJson)
      },
      addForEachFunReqXml(data) {
        const _this = this
        data.forEach((val, index) => {
          if (val.id === _this.parentIdDataReqXml) {
            console.log(val)
            val.children.push({
              id: _this.generateMixedReqXml(30),
              parentId: _this.parentIdDataReqXml,
              parameterName: '',
              type: '',
              required: true,
              explain: '',
              limit: '',
              example: '',
              children: []
            })
          } else if (val.children.length !== 0) {
            _this.addForEachFunReqXml(val.children)
          }
        })
      },
      addRowDataReqXml(row, index) {
        const _this = this
        this.parentIdDataReqXml = row.parentId
        console.log(row)
        if (row.parentId === '****') {
          this.requestBodyTableJson.splice(index, 0, {
            id: _this.generateMixedReqXml(30),
            parentId: '****',
            parameterName: '',
            type: '',
            required: true,
            explain: '',
            limit: '',
            example: '',
            children: []
          })
        } else {
          console.log('不是根节点')
          this.addForEachFunReqXml(this.requestBodyTableJson)
        }
      },
      // ---------------------------------------------
      transFun(val) {
        val.forEach(item => {
          if (item.required === 1) {
            this.$set(item, 'required', true)
          } else {
            this.$set(item, 'required', false)
          }
        })
      },
      getCodeMirrorData() {
        console.log(this.$refs.rawTextareaResponse.getCodeData())
        return this.$refs.rawTextareaResponse.getCodeData()
      },
      collapseHandelClick(val) { // 预处理 - 在编辑器中写入数据
        console.log(val)
        this.textAreaValuePreteratment = val
      },
      closeBtn() {
        this.showCollapse = !this.showCollapse
      },
      selectChangeAuthor(val) {
        console.log(val)
        this.selectVal = val
      },
      burlChangeVal() {
        this.$emit('changeFormFun', this.dataArr)
      },
      handleChange(val) {

      },
      handleClick() {

      },
      removeRow(index, tableDom) {
        switch (tableDom) {
          case 'tableData':
            this.tableData.splice(index, 1)
            break
          case 'requestBodyTableFormData':
            this.requestBodyTableFormData.splice(index, 1)
            break
          case 'requestBodyTableJson':
            this.requestBodyTableJson.splice(index, 1)
            break
          case 'requestBodyTableQuery':
            this.requestBodyTableQuery.splice(index, 1)
            break
          case 'requestBodyTableREST':
            this.requestBodyTableREST.splice(index, 1)
            break
        }
      },
      tableRowDataChange(val, row, tableDom) {
        switch (tableDom) {
          case 'tableData':
            if (row.addRow) {
              row.addRow = false
              this.tableData.push({
                type: 0, // 类型（0请求head，1返回head）
                headerName: '', // 标签
                required: true, // 必填
                headerValue: '', // 示例
                remarks: '', // 说明
                addRow: true
              })
            }
            break
          case 'requestBodyTableFormData':
            if (row.addRow) {
              row.addRow = false
              this.requestBodyTableFormData.push({
                addRow: true,
                parameterName: '',
                type: '',
                required: true,
                explain: '',
                limit: '',
                example: ''
              })
            }
            break
          case 'requestBodyTableJson':
            if (row.addRow) {
              row.addRow = false
              this.requestBodyTableJson.push({
                addRow: true,
                parameterName: '',
                type: '',
                required: true,
                explain: '',
                limit: '',
                example: ''
              })
            }
            break
          case 'requestBodyTableQuery':
            if (row.addRow) {
              row.addRow = false
              this.requestBodyTableQuery.push({
                addRow: true,
                parameterName: '',
                type: '',
                required: true,
                explain: '',
                limit: '',
                example: ''
              })
            }
            break
          case 'requestBodyTableREST':
            if (row.addRow) {
              row.addRow = false
              this.requestBodyTableREST.push({
                addRow: true,
                parameterName: '',
                type: '',
                required: true,
                explain: '',
                limit: '',
                example: ''
              })
            }
            break
        }
      }
    }
  }
</script>

<style>

</style>
